<script setup>
import { ref, toRef, toRefs, reactive, onBeforeMount } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
// const title = ref("");
// const HisArr=ref([])
const data = reactive({
  HisArr: [],
  title: "",
});
const onSearch = (e) => {
  // console.log(title.value);
  let obj={
    title:data.title
  }
  data.HisArr.push(obj);
  localStorage.setItem("hislist", JSON.stringify(data.HisArr));
  // console.log(HisArr.value);
  router.push({ path: "/searchlist", query: { key: data.title } });
};
const onCancel = () => {};
onBeforeMount(() => {
  data.HisArr = JSON.parse(localStorage.getItem("hislist"));
  console.log(data.HisArr);
});
const delitem = (i) => {
  data.HisArr.splice(i, 1);
  localStorage.setItem("hislist", JSON.stringify(data.HisArr));
};
const Allldel=()=>{
  data.HisArr=[]
  localStorage.setItem("hislist", JSON.stringify(data.HisArr));

}
const JumpList=(item)=>{
  router.push({ path: "/searchlist", query: { key: item } });
}
console.log(localStorage.getItem("hislist"));
</script>
<template>
  <div>
    <div class="_search_head_main">
      <div class="search_head_back">
        <van-icon name="arrow-left" size="25" @click="router.go(-1)" />
      </div>

      <van-search
        v-model="data.title"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
      />
    </div>

    <div class="_search_list">
      <div>历史记录</div>

      <div>
        <van-icon name="delete-o" size="25"  @click="Allldel"/>
      </div>
    </div>

    <div class="_search_list" v-for="(item, index) in data.HisArr" :key="index">
      <div @click="JumpList(item.title)">{{ item .title}}</div>

      <van-icon name="cross" @click="delitem(index)" />
    </div>
  </div>
</template>
<style scoped>
._search_head_main {
  width: 100%;
  height: 80px;
  display: flex;
  background-color: white;
}

.search_head_back {
  width: 15%;
  height: 80px;
  text-align: center;
  line-height: 80px;
}

.van-search {
  width: 85%;
}

._search_list {
  width: 100%;
  height: 80px;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;
}
</style>
